<template>
  <div class="screen-container">
    <div class="scrren-header">
      <screenfull id="screenfull" class="screen-full hover-effect" />
    </div>
    <!-- <div class="chart-bg left-bg"></div>
    <div class="chart-bg right-bg"></div> -->
    <div class="screen-body">
      <!---<<<<<<<<<<<<左侧统计图---->
      <div class="body-left">
        <!--人员统计-->
        <div class="chart-container">
          <div class="chart-header">人员统计</div>
          <div class="chart-body">
            <div class="chart-sum people">
              <span class="sum-num">{{
                person.personsSum ? person.personsSum : "0"
              }}</span>
              <span class="sum-label">厂内人员总数</span>
            </div>
            <div class="chart-list">
              <div class="chart-user-item">
                <span class="item-font">员工</span>
                <span class="item-font"
                  >{{ person.staffSum ? person.staffSum : "0" }}人</span
                >
              </div>
              <div class="chart-user-item">
                <span class="item-font">访客/VIP</span>
                <span class="item-font"
                  >{{ person.visitorSum ? person.visitorSum : "0" }}人</span
                >
              </div>
              <div class="chart-user-item">
                <span class="item-font">承包商</span>
                <span class="item-font"
                  >{{
                    person.manufacturerStaffSum ? person.manufacturerStaffSum : "0"
                  }}人</span
                >
              </div>
            </div>
          </div>
        </div>

        <!--车辆统计-->
        <div class="chart-container" @click="openCar">
          <div class="chart-header">车辆统计</div>
          <div class="chart-body">
            <div class="chart-sum car">
              <span class="sum-num">{{carStatistics.carSum!="" ? carStatistics.carSum:"0"}}</span>
              <span class="sum-label">厂内车辆总数</span>
            </div>
            <div class="chart-list">
              <div class="chart-car-item">
                <div class="enter"></div>
                <div class="car-label">
                  <span class="item-font">{{carStatistics.inCarSum ? carStatistics.inCarSum:"0"}}</span>
                  <span class="item-font" style="margin-top: -18px; margin-left: -20px"
                    >进厂车辆</span
                  >
                </div>
              </div>
              <div class="chart-car-item">
                <div class="leave"></div>
                <div class="car-label">
                  <span class="item-font">{{carStatistics.outCarSum ? carStatistics.outCarSum:"0"}}</span>
                  <span class="item-font" style="margin-top: -18px; margin-left: -20px"
                    >出厂车辆</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>

        <!--智能告警-->
        <div class="chart-container">
          <div class="chart-header">智能告警</div>
          <div class="chart-body" style="flex-wrap: wrap">
            <div class="alarm-list" >
              <div class="alarm-total"></div>
              <span style="margin-top: -30px; color: #fff"> {{alarmStatistics.alarmSummarySum!="" ? alarmStatistics.alarmSummarySum:"0"}}个 </span>
              <span class="item-font" style="align-content: center; margin-top: 10px"
                >告警汇总</span
              >
            </div>
            <div class="alarm-list" >
              <div class="alarm-total"></div>
              <span style="margin-top: -30px; color: #fff"> {{alarmStatistics.sosAlarmSum ? alarmStatistics.sosAlarmSum:"0"}}个 </span>
              <span class="item-font" style="align-content: center; margin-top: 10px"
                >SOS告警</span
              >
            </div>
            <div class="alarm-list" >
              <div class="alarm-total"></div>
              <span style="margin-top: -30px; color: #fff">  {{alarmStatistics.parameterAlarmSum ? alarmStatistics.parameterAlarmSum:"0"}}个 </span>
              <span class="item-font" style="align-content: center; margin-top: 10px"
                >数据异常告警</span
              >
            </div>
            <div class="alarm-list" >
              <div class="alarm-total"></div>
              <span style="margin-top: -30px; color: #fff"> {{alarmStatistics.lowBatteryAlarmSum?alarmStatistics.lowBatteryAlarmSum:"0"}}个 </span>
              <span class="item-font" style="align-content: center; margin-top: 10px"
                >低电量告警</span
              >
            </div>
            <div class="alarm-list" >
              <div class="alarm-total"></div>
              <span style="margin-top: -30px; color: #fff"> {{alarmStatistics.fenceAlarmSum?alarmStatistics.fenceAlarmSum:"0"}}个 </span>
              <span class="item-font" style="align-content: center; margin-top: 10px"
                >电子围栏告警</span
              >
            </div>
          </div>
        </div>
      </div>
      <!---<<<<<<<<<<<<<<<右侧统计图---->
      <div class="body-right">
        <!--危险作业统计-->
        <div class="chart-container">
          <div class="chart-header">危险作业统计</div>
          <div class="chart-body" style="flex-wrap: wrap">
            <div class="risk-work work1" >
              <span style="margin-left: 90px">吊装作业</span>
              <span style="margin-left: 108px; padding-bottom: 5px; line-height: 26px"
                >{{workStatistics.diaozhuang!="" ? workStatistics.diaozhuang:"0"}}个</span
              >
            </div>
            <div class="risk-work work1" >
              <span style="margin-left: 90px">动火作业</span>
              <span style="margin-left: 108px; padding-bottom: 5px; line-height: 26px"
                >{{workStatistics.donghuo ? workStatistics.donghuo:"0"}}个</span
              >
            </div>
            <div class="risk-work work1" >
              <span style="margin-left: 90px">动土作业</span>
              <span style="margin-left: 108px; padding-bottom: 5px; line-height: 26px"
                >{{workStatistics.dongtu ? workStatistics.dongtu:"0"}}个</span
              >
            </div>
            <div class="risk-work work1" >
              <span style="margin-left: 90px">断路作业</span>
              <span style="margin-left: 108px; padding-bottom: 5px; line-height: 26px"
                >{{workStatistics.duanlu ? workStatistics.duanlu:"0"}}个</span
              >
            </div>
            <div class="risk-work work1" >
              <span style="margin-left: 90px">高处作业</span>
              <span style="margin-left: 108px; padding-bottom: 5px; line-height: 26px"
                >{{workStatistics.gaochu ? workStatistics.gaochu:"0"}}个</span
              >
            </div>
            <div class="risk-work work1" >
              <span style="margin-left: 90px">盲板作业</span>
              <span style="margin-left: 108px; padding-bottom: 5px; line-height: 26px"
                >{{workStatistics.mangban ? workStatistics.mangban:"0"}}个</span
              >
            </div>
            <div class="risk-work work1" >
              <span style="margin-left: 90px">受限空间作业</span>
              <span style="margin-left: 108px; padding-bottom: 5px; line-height: 26px"
                >{{workStatistics.souxian ? workStatistics.souxian:"0"}}个</span
              >
            </div>
            <div class="risk-work work1" >
              <span style="margin-left: 90px">临时用电作业</span>
              <span style="margin-left: 108px; padding-bottom: 5px; line-height: 26px"
                >{{workStatistics.yongdian ? workStatistics.yongdian:"0"}}个</span
              >
            </div>
          </div>
        </div>
        <!--风险统计-->
        <div class="chart-container">
          <div class="chart-header">风险统计</div>
          <div class="chart-body">
            <div class="chart-list">
              <div class="risk"></div>
              <span
                style="
                  margin-top: -65px;
                  text-align: center;
                  color: #fff;
                  line-height: 40px;
                "
                >{{riskStatistics.majorRiskNum!="" ?riskStatistics.majorRiskNum:"0"}}个
              </span>
              <span class="item-font" style="align-content: center; margin-top: 10px"
                >重大风险</span
              >
            </div>
            <div class="chart-list">
              <div class="risk"></div>
              <span
                style="
                  margin-top: -65px;
                  text-align: center;
                  color: #fff;
                  line-height: 40px;
                "
                >{{riskStatistics.largerRiskNum?riskStatistics.largerRiskNum:"0"}}个
              </span>
              <span class="item-font" style="align-content: center; margin-top: 10px"
                >较大风险</span
              >
            </div>
            <div class="chart-list">
              <div class="risk"></div>
              <span
                style="
                  margin-top: -65px;
                  text-align: center;
                  color: #fff;
                  line-height: 40px;
                "
                >{{riskStatistics.ordinaryRiskNum?riskStatistics.ordinaryRiskNum:"0"}}个
              </span>
              <span class="item-font" style="align-content: center; margin-top: 10px"
                >一般风险</span
              >
            </div>
            <div class="chart-list">
              <div class="risk"></div>
              <span
                style="
                  margin-top: -65px;
                  text-align: center;
                  color: #fff;
                  line-height: 40px;
                "
                >{{riskStatistics.lowRiskNum?riskStatistics.lowRiskNum:"0"}}个
              </span>
              <span class="item-font" style="align-content: center; margin-top: 10px"
                >低风险</span
              >
            </div>
          </div>
        </div>

        <!--隐患排查-->
        <div class="chart-container">
          <div class="chart-header">隐患排查统计</div>
          <div class="chart-body">
            <div class="chart-sum hidden">
              <span class="sum-num" style="padding-top: 16px">{{ hiddenStatistic.rectifyRate!="" ? hiddenStatistic.rectifyRate:"0%" }}</span>
            </div>
            <div class="chart-list">
              <div class="chart-hidden-item">
                <span class="hidden-item-font">隐患提交</span>
                <span class="hidden-value-font">{{ hiddenStatistic.checkTaskNum!="" ? hiddenStatistic.checkTaskNum:"0" }}</span>
              </div>
              <div class="chart-hidden-item">
                <span class="hidden-item-font">隐患整改</span>
                <span class="hidden-value-font">{{ hiddenStatistic.ectifyNum!="" ? hiddenStatistic.ectifyNum:"0" }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="screen-operator">
      <img class="operate-button" src="./../../../assets/screen/home_active.png" />
      <div class="operate-button gas" @click="goToGas"></div>
      <div class="operate-button tank" @click="goToTank"></div>
      <div class="operate-button location" @click="goToLocation"></div>
    </div>
  </div>
  <div
    class="screen-dialog"
    :title="title"
    v-if="open"
    width="60%"
    append-to-body
    close="closeDialog"
  >
    <div class="screen-cance" @click="canceScreen"></div>
    <el-tabs v-model="activeTabName" type="card" class="demo-tabs">
      <el-tab-pane label="厂内车辆" name="1">
        <el-row v-if="currentFactoryCar.length > 0" :gutter="12" style="margin-top: 12px">
          <el-col :span="12" :sm="24" :md="12" v-for="(item, index) in currentFactoryCar">
            <div class="car-content">
              <div class="car-row">
                <div class="car-item">车牌号：{{ item.userCode }}</div>
                <div class="car-item">车卡IC号：{{ item.cardNo }}</div>
              </div>
              <div class="car-row">
                <div class="car-item">进厂时间：{{ item.inTime }}</div>
                <div class="car-item">出厂时间：---</div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row v-else class="empty-record">
          <div>暂无记录</div>
          <img src="@/assets/common/image_null.png" />
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="进厂车辆" name="2">
        <el-row v-if="inFactoryCar.length > 0" :gutter="12" style="margin-top: 12px">
          <el-col :span="12" :sm="24" :md="12" v-for="(item, index) in inFactoryCar">
            <div class="car-content">
              <div class="car-row">
                <div class="car-item">车牌号：{{ item.userCode }}</div>
                <div class="car-item">车卡IC号：{{ item.cardNo }}</div>
              </div>
              <div class="car-row">
                <div class="car-item">进厂时间：{{ item.inTime }}</div>
                <div class="car-item">出厂时间：---</div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row v-else class="empty-record">
          <div>暂无记录</div>
          <img src="@/assets/common/image_null.png" />
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="出厂车辆" name="3">
        <el-row v-if="outFactoryCar.length > 0" :gutter="12" style="margin-top: 12px">
          <el-col :span="12" :sm="24" :md="12" v-for="(item, index) in outFactoryCar">
            <div class="car-content">
              <div class="car-row">
                <div class="car-item">车牌号：{{ item.userCode }}</div>
                <div class="car-item">车卡IC号：{{ item.cardNo }}</div>
              </div>
              <div class="car-row">
                <div class="car-item">进厂时间：{{ item.inTime }}</div>
                <div class="car-item">出厂时间：---</div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row v-else class="empty-record">
          <div>暂无记录</div>
          <img src="@/assets/common/image_null.png" />
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup name="Screen">
import axios from "axios";
import Screenfull from "@/components/Screenfull";
const open = ref(false);
const title = ref("");
const router = useRouter();
const url = ref(
  "http://192.168.124.2:8084/location_system_5.4.9.5/map3d/nosecret.html?company=TSPDH&version=5.4.9.5&type=1&user=lyg&psw=Lyg@2022"
);
const baseUrl = ref("http://192.168.124.249:9898");
const person = ref({});//人员数据统计
const carStatistics = ref({});//车辆数据统计
const alarmStatistics = ref({});//告警数据统计
const workStatistics = ref({});//危险作业统计
const riskStatistics = ref({});//风险统计数据
const hiddenStatistic = ref({});//隐患统计数据
const activeTabName = ref("1");
const dataList = ref([]);
const inFactoryCar = ref([]);
const outFactoryCar = ref([]);
const currentFactoryCar = ref([]);
/** 打开车辆记录 */
function openCar() {
  open.value = true;
  title.value = "车辆进出记录";
}

/** 1:获取人员统计数据 */
function getPersonStatistics() {
  let url = baseUrl.value + "/screen/getPersonStatistics";
  axios.get(url).then((res) => {
    person.value = res.data.data;
  
  });
}
/** 2:获取车辆统计数据 */
function getCarStatistics(){
   let url = baseUrl.value+"/screen/getCarStatistics";
   axios.get(url).then((res) => {
    carStatistics.value = res.data.data;
  
  }); 
}
/** 3:获取智能告警统计 */
function getAlarmStatistics(){
    let url = baseUrl.value+"/screen/getAlarmStatistics";
   axios.get(url).then((res) => {
    alarmStatistics.value = res.data.data;
    console.log("告警统计",alarmStatistics.value)
  }); 

}

/** 4:获取危险作业统计 */
function getWorkStatistics(){
    let url = baseUrl.value+"/screen/getRiskWorkStatistics";
   axios.get(url).then((res) => {
    workStatistics.value = res.data.data;
    console.log("危险作业统计",workStatistics.value)
  }); 
}
/** 5:获取风险统计 */
function getRiskStatistics(){
    let url = baseUrl.value+"/screen/getRiskStatistics";
   axios.get(url).then((res) => {
    riskStatistics.value = res.data.data;
    console.log("风险统计",riskStatistics.value)
  }); 
}

/** 6:获取隐患统计 */
function getHiddenStatistics(){
    let url = baseUrl.value+"/screen/getHiddenStatistics";
    axios.get(url).then((res) => {
     hiddenStatistic.value = res.data.data;
     console.log("隐患统计",hiddenStatistic.value)
    }); 
}

/** 获取车辆记录 */
function getCarRecordList() {
  let url = baseUrl.value + "/car/list";
  //console.log("请求车辆记录列表",url);
  axios.get(url).then((res) => {
    //console.log(res.data.data);
    if (res.data.data.length > 0) {
      dataList.value = res.data.data;
      handleCurrentCar();
      inFactoryCar.value = res.data.data;
      console.log("进厂记录",inFactoryCar.value)
      handleOutCar();
    }
  });

}
/** 关闭弹窗 */
function canceScreen(){
    open.value = false
}

/**
 * 过滤在场车辆
 */
function handleCurrentCar() {
  dataList.value.forEach((item) => {
    if (item.outTime != "" || item.outTime != null) {
      if (new Date(item.inTime) > new Date(item.outTime)) {
        currentFactoryCar.value.push(item);
      }
    } else {
      currentFactoryCar.value.push(item);
    }
  });
}

/**
 * 过滤出厂车辆
 */
function handleOutCar() {
  dataList.value.forEach((item) => {
    if (item.outTime != "" || item.outTime != null) {
      if (new Date(item.inTime) < new Date(item.outTime)) {
        outFactoryCar.value.push(item);
      }
    }
  });
}

/** 跳转到气体侦测页面 */
function goToGas() {
  router.push("/screen/gas");
}
/** 跳转到储罐实时数据 */
function goToTank() {
  router.push("/screen/tank");
}

/** 跳转到定位 */
function goToLocation() {
  window.open(url.value);
}
//请求数据
getPersonStatistics();
getCarRecordList();
getCarStatistics();
getAlarmStatistics();
getWorkStatistics();
getRiskStatistics();
getHiddenStatistics();
</script>
<style scoped lang="scss">
.screen-dialog {
  position: absolute;
  width: 60%;
  top: 120px;
  left: 20%;
  max-height: 580px;

  overflow: auto;
  background: url(@/assets/screen/dialogBg.png) no-repeat;
  background-size: 100% 100%;
  color: blue;
  padding: 68px 28px;
}
.screen-cance{
    position: absolute;
    right: 0;
    top: 0;
    width: 80px;
    height: 80px;
    z-index: 999;
}
.empty-record {
  height: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.car-content {
  position: relative;
  margin-top: 62px;
  height: 128px;
  background: url("@/assets/car/imag_cl_bg@2x.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: end;
}
.car-row {
  height: 64px;
  display: flex;
  flex-direction: row;
}
.car-item {
  color: #fff;
  font-size: 14px;
  line-height: 64px;
  padding-right: 38px;
}
:deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
  color: #fff;
  background-image: linear-gradient(to bottom, #0085fd, #bce9f5);
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #fff;
  font-size: 32px;
  font-weight: 600;
}
:deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
  border: none;
}
:deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
  color: #fff;
  border: 0.5px solid #0085fd;
}
:deep(.el-tabs--card > .el-tabs__header) {
  border-bottom: 1px solid #0085fd;
}
</style>
